<template>
	<view class="repairBillDetails">
		<view class="main">
			<view class="topRight font_blod">
				<view class="topRightBox1" v-if="msg.orderState == 0">
					<text>未接单</text>
				</view>
				<view class="topRightBox" v-else>
					<text>已接单</text>
				</view>
			</view>
			<view class="head">
				订单编号：{{msg.id}}
			</view>
			<view class="list">
				<view class="conLi">
					<view class="title">
						服务类型
					</view>
					<view class="maohao">
						：
					</view>
					<view class="content font_blod">
						{{msg.typeNameFirst}}
					</view>
				</view>
				<view class="conLi">
					<view class="title">
						电器品类
					</view>
					<view class="maohao">
						：
					</view>
					<view class="content font_blod">
						{{msg.typeNameSecond}} {{msg.typeNameThird}}
					</view>
				</view>
				<view class="conLi">
					<view class="title">
						数 量
					</view>
					<view class="maohao">
						：
					</view>
					<view class="content font_blod">
						{{msg.orderNumber}}
					</view>
				</view>
				<view class="conLi">
					<view class="title">
						地 址
					</view>
					<view class="maohao">
						：
					</view>
					<view class="content font_blod">
						{{msg.userAddress}}
					</view>
				</view>
				<view class="conLi">
					<view class="title">
						用 户
					</view>
					<view class="maohao">
						：
					</view>
					<view class="content font_blod" @click="cli_phone(msg.userPhone)">
						<text>{{msg.userName}}</text>
						<image class="contentImg" src="https://www.zzzsyh.com/applets/agent/agent/phone-three.png" mode=""></image>
						<text class="contentPhone">{{msg.userPhone}}</text>
					</view>
				</view>
				<view class="conLi">
					<view class="title">
						师傅姓名
					</view>
					<view class="maohao">
						：
					</view>
					<view class="content font_blod" @click="cli_phone(msg.repairStorePhone)">
						<text>{{msg.repairStorePerson}}</text>
						<image class="contentImg" src="https://www.zzzsyh.com/applets/agent/agent/phone-three.png" mode=""></image>
						<text class="contentPhone">{{msg.repairStorePhone}}</text>
					</view>
				</view>
				<view class="conLi">
					<view class="title">
						备注信息
					</view>
					<view class="maohao">
						：
					</view>
					<view class="content font_blod">
						{{msg.repairContent}}
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import allapi from '../../api/index.js'
	export default {
		data() {
			return {
				id: '',
				msg: {}
			}
		},
		onLoad(val) {
			this.id = val.id
		},
		mounted() {
			this.getReserveOrderDetails()
		},
		methods: {
			// 拨打电话
			cli_phone (val) {
				uni.makePhoneCall({
					phoneNumber: val
				})
			},
			// 获取详情
			getReserveOrderDetails() {
				uni.request({
					url: allapi.getServiceOrderDetailsById,
					data: {
						orderId: this.id
					},
					success: (res) => {
						console.log('获取详情', res);
						this.msg = res.data.data
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.repairBillDetails {
		.main {
			margin: 24rpx;
			background: #FFFFFF;
			border-radius: 32rpx;
			padding: 24rpx;
			padding-bottom: 48rpx;
			position: relative;

			.head {
				border-bottom: 1rpx solid #EEEEEE;
				font-size: 28rpx;
				color: #999999;
				font-weight: 400;
				padding-bottom: 24rpx;
			}

			.conLi {
				display: flex;
				margin-top: 50rpx;

				.title {
					font-size: 28rpx;
					width: 120rpx;
					font-weight: 400;
					color: #666666;
					line-height: 40rpx;
					display: flex;

				}

				.maohao {
					font-size: 28rpx;
					font-weight: 400;
					color: #666666;
					line-height: 40rpx;
				}

				.content {
					flex: 1;
					color: #333333;
					line-height: 44rpx;
					font-size: 32rpx;
					text-align: left;
					.contentImg {
						width: 32rpx;
						height: 32rpx;
						margin: 0 16rpx;
					}
					.contentPhone {
						color: #28CD50;
						font-size: 32rpx;
						line-height: 44rpx;
					}
				}
			}

			.topRight {
				position: absolute;
				right: 0;
				top: 0;
				width: 182rpx;
				height: 74rpx;
				overflow: hidden;
				background: #F3F5F7;
				font-size: 28rpx;

				.topRightBox {
					width: 182rpx;
					height: 74rpx;
					background: url('https://www.zzzsyh.com/applets/agent/user/user30.png');
					background-size: 100%;
					background-repeat: no-repeat;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					text {
						margin-right: 28rpx;
						color: #999999;
					}
				}

				.topRightBox1 {
					width: 182rpx;
					height: 74rpx;
					background: url('https://www.zzzsyh.com/applets/agent/user/user28.png');
					background-size: 100%;
					background-repeat: no-repeat;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					text {
						margin-right: 28rpx;
						color: #F48F5F;
					}
				}

				.topRightBox2 {
					width: 182rpx;
					height: 74rpx;
					background: url('https://www.zzzsyh.com/applets/agent/user/user30.png');
					background-size: 100%;
					background-repeat: no-repeat;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					text {
						margin-right: 28rpx;
						color: #57C576;
					}
				}

				.topRightBox3 {
					width: 182rpx;
					height: 74rpx;
					background: url('https://www.zzzsyh.com/applets/agent/user/user31.png');
					background-size: 100%;
					background-repeat: no-repeat;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					text {
						margin-right: 28rpx;
						color: #666666;
					}
				}

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>
